<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计划类别</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>

    <style>
        * {font-family: "Microsoft Yahei" !important;overflow-y: hidden;}
        nav button{
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
        }
        nav div{
            float: left !important;
            margin: 15px;
        }
        nav{
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }
        .layui-tab{
            margin:0;
        }
        .content{
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }
        .layui-tab-content{
            background-color: #F5F7FA;
        }
        .search{
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }
        .allBtn{
            float: left !important;
            margin-top: 10px;
            width: 70px;

            border: none;
            background: #fafbfc;
        }
        .screen{
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }
        .one{
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }
        div .layui-input-inline{
            padding-left: 25px;
        }
        .planType{
            line-height: 45px;
            padding-left: 20px;
        }
        .planType:hover {
            border-color: #ececec;
            background-color: #ececec;
        }
        .del{
            float: right;
            margin: 10px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-row">
    <div class="layui-col-md3" id="leftTree">
        <nav style="border-right: 1px solid #cfdbe2; " class="layui-collapse" lay-filter="leftTree">
            <p style="margin-left:15px ;margin-top: 15px">计划类别
                <button type="button" class="layui-btn layui-btn layui-btn-primary layui-btn layui-btn-sm add" style="float: right;margin-right: 10px; margin-top: 0px">新建</button>
            </p>
        </nav>
        <div class="" style="border-right: 1px solid #ccc;">
            <ul class="typeUl" lay-filter="test" style="width: 100%;">
                <li class=""><a href="">产品</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-col-md9">
        <nav>
            <i class="layui-icon layui-icon-prev" style="float: left;line-height: 50px;margin-left: 5px;color:#fafbfc "></i>
            <div>新建类别</div>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm iconView" style="float: right;margin-right: 30px">提交</button>
        </nav>
        <div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <div class="layui-tab-content">
                    <div class="content year">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 100px;">计划类别名称</label>
                                <div class="layui-input-block">
                                    <input  type="text" name="title" required lay-verify="required" placeholder="请输入计划类别名称" autocomplete="off" class="layui-input planTypeName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 100px;"><pre>计划类别描述</pre></label>
                                <div class="layui-input-block">
                                    <input  type="text" name="title" required lay-verify="required" placeholder="序号" autocomplete="off" class="layui-input planTypeDesc">
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    $('.layui-col-md3 div').height($(document.body).height());
    $('.content').height($(document.body).height()-50);
    $('.classBtn').click(function () {
        var index = $('.classBtn').index(this);
        $('.content:eq("'+index+'")').css('display','block').siblings('.content').css('display','none')
        $(this).toggleClass("one");
        $(this).siblings('button').removeClass("one");
    });
    $(document).on('mouseenter', 'i', function(){
        $(this).css('color','#03a9f4')
    }).on('mouseleave', 'i', function(){
        $(this).css('color','#fafbfc')
    });
    $('.iconView').click(function () {
        $(this).siblings().eq(3).toggle();
        if($(this).siblings().eq(0).is('.one')){
            $(this).parents('nav').siblings('div').find('.year').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.year').children().eq(2).toggle()
        }else if($(this).siblings().eq(1).is('.one')){
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(2).toggle()
        }else if($(this).siblings().eq(2).is('.one')){
            $(this).parents('nav').siblings('div').find('.month').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.month').children().eq(2).toggle()
        }

    })
    layui.use(['form', 'layedit', 'laydate','layedit','table','element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,element = layui.element
            ,table = layui.table;

        layedit.build('texPart'); //建立编辑器
        form.render();

    });
    $(function () {
        $.ajax({
            url: "/IncomeType/findIncomType",
            type: "get",
            dataType: 'json',
            success: function (data) {
                var str=''
                for(var i=0;i<data.obj.length;i++){
                    str+=' <li class="planType" planTypeId='+data.obj[i].planTypeId+'><a href="">'+data.obj[i].planTypeName+'</a><button class="layui-btn layui-btn-danger layui-btn-xs del" type="button" planTypeId='+data.obj[i].planTypeId+'>删除</button></li>'
                }
                $('.typeUl').html(str)
            }
        });
        $(document).on('click', 'li', function(){
           $('.layui-icon-prev').next().text('编辑类别');
           $(this).css('background','#03a9f4')
           $(this).siblings().css('background','white')
           $('.iconView').attr('id',$(this).attr('planTypeId'))
            $.ajax({
                url: "/IncomeType/findIncomTypeById",
                type: "get",
                dataType: 'json',
                data:{
                    planTypeId:$(this).attr('planTypeId')
                },
                success: function (data) {
                    $('.planTypeDesc').val(data.object.planTypeDesc)
                    $('.planTypeName').val(data.object.planTypeName)
                }
            });
        });
        $(document).on('click', '.del', function(){
            var planTypeId=$(this).attr('planTypeId')
            layer.confirm('确定要删除该条数据吗？', {
                btn: ['确定', '取消'], //按钮
                title: "删除"
            }, function () {
                $.ajax({
                    url: "/IncomeType/deleteIncomType",
                    type: "post",
                    dataType: 'json',
                    data:{
                        planTypeId:planTypeId
                    },
                    success: function (res) {
                        if(res.flag){
                            layer.msg('删除成功！', { icon:6});
                            window.location.reload()
                        }
                    }
                });
            }, function () {
                layer.closeAll();
            });
        })
    })
    $('.add').click(function () {
        $('.layui-icon-prev').next().text('新建类别')
        window.location.reload()
    });
    $('.iconView').click(function () {
        if($('.layui-icon-prev').next().text()=='新建类别'){
            var data={
                planTypeName:$('.planTypeName').val(),
                planTypeDesc:$('.planTypeDesc').val()
            }
        }else{
            var data={
                planTypeName:$('.planTypeName').val(),
                planTypeDesc:$('.planTypeDesc').val(),
                planTypeId:$('.iconView').attr('id')
            }
        }
        IncomeType(data)
    });
    function IncomeType(data) {
        $.ajax({
            url: "/IncomeType/saveIncomType",
            type: "post",
            dataType: 'json',
            data:data,
            success: function (res) {
                if(res.flag){
                    window.location.reload();
                    layer.msg('保存成功！', { icon:6});
                }
            }
        });
    }

</script>

</html>